<template>
  <div>
    <!-- 遮罩登录 -->
    <van-overlay :show="show" lock-scroll>
      <div class="wrapper">
        <van-form class="block" validate-trigger="onSubmit">
          <div class="wclose">
            <span @click="scrollClose()">
              X
            </span>
          </div>
          <el-card class="card">
            <h2 class="card-header">用户登录</h2>
            <div class="card-body">
              <el-form :model="user" label-position="left" label-width="80px" style="width: 400px;">
                <el-form-item label="账号:" prop="accountUsername" :rules="[
                  {
                    required: true,
                    message: '账户不能为空',
                    trigger: 'blur',
                  }
                ]">
                  <el-input v-model="user.accountUsername" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="accountPassword" :rules="[
                  {
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur',
                  }
                ]">
                  <el-input type="password" v-model="user.accountPassword" show-password autocomplete="off"></el-input>
                </el-form-item>
                <el-radio-group v-model="radio">
                  <el-radio label="1">学生</el-radio>
                  <el-radio label="2">校内老师</el-radio>
                  <el-radio label="3">企业教师</el-radio>
                  <el-radio label="4">管理员</el-radio>
                  <el-radio label="5">企业</el-radio>
                </el-radio-group>
                <hr>
                <el-row justify="center">
                  <el-col :span="6">
                    <el-button type="primary" @click="Login">登录</el-button>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" @click="goRegister">注册</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </van-form>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router'// 引入路由对象
import { ElMessage } from 'element-plus';
import requests from '../../api/ajax.js';// 引入
const radio = ref('1')

const show = ref(true);

//实例化路由方法
const router = useRouter()
let user = ref({
  accountUsername: "",
  accountPassword: "",
  accountIdentity: radio,
});
// 登录请求
function Login() {
  // 发送POST请求

  if (!user.value.accountUsername || !user.value.accountPassword) {
    ElMessage.error('账号或密码不能为空')
  } else {
    requests({ url: "/login", method: "post", data: user.value }).then(res => {
      if (res.code == '20051') {
        ElMessage({
          message: '欢迎您的登录,即将返回首页！',
          type: 'success',
        })
        //存储用户信息到浏览器toke,原生token引入
        localStorage.setItem("user", JSON.stringify(res.msg));
        localStorage.setItem("visitor", JSON.stringify(res.rdata));
        //const aabb = res.rdata;
        if (radio.value == 1) {
          show.value = false;
          setTimeout(() => {
            router.push({
              path: '/student',//跳转到学生页面
              query:{ id : user.value.accountIdentity }
            })
          }, 1000);
        } else if (radio.value == 2) {
          show.value = false;
          setTimeout(() => {
            router.push({
              path: '/teacher',//跳转到校内教师页面
              query:{ id : user.value.accountIdentity }
            })
          }, 1000);
        } else if (radio.value == 3) {
          show.value = false;
          setTimeout(() => {
            router.push({
              path: '/outTeacher',//跳转到校外教师页面
            })
          }, 1000);
        } else if (radio.value == 4) {
          show.value = false;
          setTimeout(() => {
            router.push({
              path: '/admin/adminhome',//跳转到管理员页面
            })
          }, 1000);
        } else if (radio.value == 5) {
          show.value = false;
          setTimeout(() => {
            router.push({
              path: '/company',//跳转到管理员页面
            })
          }, 1000);
        }
      } else if (res.code == "20050") {
        ElMessage.error(res.msg)
      } else {
        ElMessage({
          message: '网络异常！',
          type: 'warning',
        })
      }
    })
      .catch(err => {
        console.error(err);
        // 登录请求失败后的操作
      });
  }


}
function scrollClose() {
  this.show = false;
  router.push({
    name: '主页',
  })
}
function goRegister() {
  router.push({
    name: 'register',
  })
}


</script>
<style lang="css">
/*  遮罩  */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.wrapper .wclose {
  position: relative;
  width: 100%;
}

.wrapper .wclose span {
  position: absolute;
  right: 8px;
  top: -32px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
}

.wrapper .wclose span:hover {
  color: #00cc4c;
}
</style>
